import { useState } from "react";
import { EyeFilled, StarFilled } from "@ant-design/icons";
import "../../../../assets/sass/home_page/free_templates/featured_picks/today_recommend/boxc_type_one/boxc_type_one.css";

const BoxcTypeOne = () => {
  const smallImg =
    "/src/assets/image/home_page/main/box_type_one/small_image_1.jpg";
  const longImg =
    "/src/assets/image/home_page/main/box_type_one/long_image_1.jpg";

  const [TypeOneImage, setTypeOneImage] = useState(smallImg);

  const boxcTypeOneEnter = () => {
    setTypeOneImage(longImg);
  };

  const boxcTypeOneLeave = () => {
    setTypeOneImage(smallImg);
    const doms = document.querySelectorAll(".boxc_type_one");
    doms.forEach((item) => {
      item.classList.add("boxc_type_one_leave");
    });
  };
  return (
    <div
      className="boxc_type_one"
      onMouseEnter={boxcTypeOneEnter}
      onMouseLeave={boxcTypeOneLeave}
    >
      <div className="scroll_box">
        <img className="small_img" src={TypeOneImage} />
      </div>
      <div className="new_bubble">NEW</div>
      <div className="bottom_bar">
        <div className="text">六一儿童节童心汇童年创意绘画作品评选</div>
        <div className="user_info">
          <div className="user">
            <div className="avatar">
              <img src="/src/assets/image/home_page/main/box_type_one/userinfo/avatar.jpg" />
            </div>
            <div className="username">梦小发</div>
          </div>
          <div className="see">
            <EyeFilled className="eye_icon" />
            <span className="see_num">122</span>
          </div>
        </div>
      </div>
      <div className="type">表单</div>
      <div className="collection">
        <StarFilled />
      </div>
      <div className="free_text">免费</div>
    </div>
  );
};

export default BoxcTypeOne;
